<template>
	<view class="content">
		<mescroll-body ref="mescrollRef" :bottombar="false" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="u-m-30">
				<block v-for="(item,index) in infoList" :key="index">
					<view class="flex align-center justify-between u-m-t-20 bg-white rounded-10" style="height: 170rpx">
						<view class="flex align-center justify-center" style="height: 100%; width: 150rpx;">
							<view class="u-p-y-30 text-center" style="width: 100%;border-right: 1rpx solid red;">
								<text class="u-font-28 u-p-t-30 coupon-text-colo">{{item.preferential_type==1?"￥":"折"}}</text>
								<text class="lineH-1 coupon-text-colo font-weight-bold" style="font-size: 50rpx;">{{item.preferential_type==1?item.money*1:item.discount*1}}</text>
							</view>
						</view>
						<view class="flex flex-column align-center">
							<text class="u-font-30 font-weight-bold coupon-text-colo">满{{item.fullmoney}}元使用</text>
							<text class="coupon-text-colo u-line-2 u-m-x-20" style="max-width: 400rpx;">{{item.content}}</text>
							<text class="u-font-20 coupon-text-colo">使用时间：{{item.begintime}}到{{item.endtime}}</text>
						</view>
						<template  v-if="item.is_get_over == 1">
							<view class="flex flex-column align-center justify-center coupon-bg-colo rounded-10" style="width: 100rpx;height: 100%; opacity: 0.5;">
								<view class="flex flex-column align-center">
									<text class="u-font-28 font-weight-bold text-white">已</text>
									<text class="u-font-28 font-weight-bold text-white">领取</text>
								</view>
							</view>
						</template>
						<template v-else>
							<view class="flex flex-column align-center justify-center coupon-bg-colo rounded-10" style="width: 100rpx;height: 100%;">
								<view class="flex flex-column"@click="getCoupon(item.id)">
									<text class="u-font-28 font-weight-bold text-white">立即</text>
									<text class="u-font-28 font-weight-bold text-white">领取</text>
								</view>
							</view>
						</template>
					</view>
				</block>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { MineCenterApi } from '@/api/serves.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				merch_id:-1,
				infoList: []
			}
		},
    onLoad(options) {
      this.merch_id = options.id || -1
    },
		methods: {
			// 上拉加载
			upCallback(page) {
				MineCenterApi.getMerchCoupon({merch_id: this.merch_id, page: page.num}).then(res=> {
					console.log('优惠劵列表', res);
					if(res.code == 1){
						let result = res.data
						if(page.num == 1) this.infoList = []; //如果是第一页需手动制空列表
						this.infoList = this.infoList.concat(result); //追加新数据
						this.mescroll.endByPage(result.length, res.totalpage)
					}else {
						this.$Toast(res.msg)
						this.mescroll.endErr()
					}
				})
			},
			getCoupon(id) {
				MineCenterApi.getcoupon({id}).then(res=> {
					console.log('领取', res);
					this.$Toast(res.msg)
					if(res.code == 1){
						this.mescroll.resetUpScroll()
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.coupon-text-colo {
	color: #E0302D;
}
.coupon-bg-colo {
	background-color: #E0302D;
}
.coupon-border-colo {
	border-color: #E0302D;
}
.opacity {
	opacity: 0.2;
}
</style>
